<script setup lang='ts'>
import { onMounted, onBeforeUnmount } from 'vue'
import { v4 as uuidv4 } from 'uuid'
const props = defineProps({
  port: {
    type: Number,
    required: true
  }
})

let player:any = null
let domId = uuidv4()

const initVideo = (port:any) => {
  const video = document.getElementById(domId)
  let url = ''
  if (process.env.NODE_ENV === 'development') {
    url = '192.16.10.78'
  } else {
    url = document.location.hostname
  }
  let videourl = 'ws://' + url + ':' + port + '/'
  // console.log('videourl-------->', videourl)
  try {
    player = new window.JSMpeg.Player(videourl, {
      canvas: video,
      disableWebAssembly: true,
      disableGl: true,
      autoplay: true,
      loop: true,
      onSourceEstablished: () => {
        console.log('onSourceEstablished')
      },
      onSourceCompleted: () => {
        console.log('onSourceCompleted')
      }
    })
    console.log(player)
  } catch (error) {
    console.log('error', error)
  }
}
const destory = () => {
  // console.log('destory')
  if (player) player.destroy()
}
onMounted(() => {
  initVideo(props.port)
})
onBeforeUnmount(() => {
  destory()
})

// watch(() => props.cameraInfo, (newValue,oldValue) => {
//   console.log('newValue',JSON.stringify(newValue),JSON.stringify(oldValue))
//   if(JSON.stringify(newValue) !== JSON.stringify(oldValue)){
//     // initVideo(9999)
//     getPort()
//   }
// }, { deep: true,immediate: true })

</script>

<template>
  <canvas :id="domId" />
</template>

<style scoped>
canvas {
  width: 100%;
  height: 100%;
}
</style>
